<template>
  <div class="synergy">
    <div class="synergy_main">
      <p class="font_s18" style="color:#BAFFFC">
        <img class="verticM" style="height: 1.125rem;" src="../../../assets/img/comprehensive/40.png" />
        工单发起
      </p>
      <img style="position: absolute; top: 1.5rem; right: 1.5rem;" src="../../../assets/img/comprehensive/41.png" @click="$emit('closesy')" />
      <div class="flexC content2">
        <div class="flex">
          <p class="flex1">
            <span class="font_s16" style="color: #BAFFFC;">任务编号&nbsp;&nbsp;</span>
            <input type="text" value="GF68972" />
          </p>
          <p class="flex1">
            <span class="font_s16" style="color: #BAFFFC;">任务名称&nbsp;&nbsp;</span>
            <input type="text" value="" />
             <!-- <input type="text" value="存在食品安全，联合执法" /> -->
          </p>
        </div>
        <div class="flex">
          <p class="flex1">
            <span class="font_s16" style="color: #BAFFFC;">发生时间&nbsp;&nbsp;</span>
            <input type="text" />
          </p>
          <p class="flex1">
            <span class="font_s16" style="color: #BAFFFC;">所属街道&nbsp;&nbsp;</span>
            <input type="text" value="" />
            <!-- <input type="text" value="三林街道" /> -->
          </p>
        </div>
        <div class="flex">
          <div class="flex1 flex">
            <span class="font_s16" style="color: #BAFFFC;">紧急程度&nbsp;&nbsp;</span>
            <p></p>
            <ul class="flex flex1 font_s14 choice textC" style="color: #65FDFF;">
              <li class="flex1" :class="workstartForm.urgency === 'general' ? 'xuanz' : ''" @click="workstartForm.urgency = 'general'">一般</li>
              <li class="flex1" :class="workstartForm.urgency === 'urgency' ? 'xuanz' : ''" @click="workstartForm.urgency = 'urgency'">紧急</li>
              <li class="flex1" :class="workstartForm.urgency === 'skyliner' ? 'xuanz' : ''" @click="workstartForm.urgency = 'skyliner'">特急</li>
              <li class="flex1" style="background: none;"></li>
            </ul>
            <p></p>
          </div>
          <div class="flex1 flex">
            <span class="font_s16" style="color: #BAFFFC;">检查类别&nbsp;&nbsp;</span>
            <p></p>
            <ul class="flex flex1 font_s14 choice textC" style="color: #65FDFF;">
              <li class="flex1" :class="workstartForm.inspect === 'everyday' ? 'xuanz' : ''" @click="workstartForm.inspect = 'everyday'">日常</li>
              <li class="flex1" :class="workstartForm.inspect === 'special' ? 'xuanz' : ''" @click="workstartForm.inspect = 'special'">专项</li>
              <li class="flex1" :class="workstartForm.inspect === 'unite' ? 'xuanz' : ''" @click="workstartForm.inspect = 'unite'">联合</li>
              <li class="flex1" style="background: none;"></li>
            </ul>
            <p></p>
          </div>
        </div>
        <div class="flex">
          <div class="flex1 flex" style="margin-right: 1rem;">
            <span class="font_s16" style="color: #BAFFFC;">监管类型&nbsp;&nbsp;</span>
            <p></p>
            <ul class="flex flex1 font_s14 choice textC" style="color: #65FDFF;">
              <li class="flex1" :class="workstartForm.regulationType === 'risk' ? 'xuanz' : ''" @click="checkRegulationType('risk')">风险监管</li>
              <li class="flex1" :class="workstartForm.regulationType === 'credit' ? 'xuanz' : ''" @click="checkRegulationType('credit')">信用监管</li>
            </ul>
            <p></p>
          </div>
          <div class="flex2 flex" v-if="workstartForm.regulationType === 'risk'">
            <span class="font_s16" style="color: #BAFFFC;">风险监管大类&nbsp;&nbsp;</span>
            <p></p>
            <ul class="flex flex1 font_s14 choice textC" style="color: #65FDFF;">
              <li class="flex1" :class="workstartForm.riskRegulation === 'operationManage' ? 'xuanz' : ''" @click="checkRiskRegulation('operationManage')">运营管理</li>
              <li class="flex1" :class="workstartForm.riskRegulation === 'fireSafety' ? 'xuanz' : ''" @click="checkRiskRegulation('fireSafety')">消防安全</li>
              <li class="flex1" :class="workstartForm.riskRegulation === 'drugHygiene' ? 'xuanz' : ''" @click="checkRiskRegulation('drugHygiene')">设备设施</li>
              <li class="flex1" :class="workstartForm.riskRegulation === 'nursing' ? 'xuanz' : ''" @click="checkRiskRegulation('nursing')">烟花爆竹</li>
              <!-- <li class="flex1" :class="workstartForm.riskRegulation === 'facilityInstrument' ? 'xuanz' : ''" @click="checkRiskRegulation('facilityInstrument')">设施设备</li> -->
            </ul>
            <p></p>
          </div>
          <div class="flex2 flex" v-if="workstartForm.regulationType === 'credit'">
            <span class="font_s16" style="color: #BAFFFC;">信用监管大类&nbsp;&nbsp;</span>
            <p></p>
            <ul class="flex flex1 font_s14 choice textC" style="color: #65FDFF;">
              <li class="flex1" :class="workstartForm.creditRegulation === 'license' ? 'xuanz' : ''" @click="checkCreditRegulation('license')">证照合同</li>
              <li class="flex1" :class="workstartForm.creditRegulation === 'innerManage' ? 'xuanz' : ''" @click="checkCreditRegulation('innerManage')">内部管理</li>
              <li class="flex1" :class="workstartForm.creditRegulation === 'integrity' ? 'xuanz' : ''" @click="checkCreditRegulation('integrity')">诚信经营</li>
              <li class="flex1" style="background: none;"></li>
            </ul>
            <p></p>
          </div>
        </div>
        <div class="flex">
          <div class="flex1" style="position: relative;">
            <span class="font_s16" style="color: #BAFFFC;">检查项&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <input
              type="text"
              :value="workstartForm.checkItem"
              placeholder="风险模型中的所有项目（运营管理、消防安全、设施设备、烟花爆竹管控风险监管）等"
              style="width: 81.5%; padding-right: 2rem;"
            />
            <img
              src="../../../assets/img/comprehensive/42.png"
              class="cursor_pointer"
              style="position: absolute; right: 3.5rem; top: 1rem; "
              @click="superviseView = !superviseView"
            />
            <div
              v-if="superviseView"
              class="again_frame colorF font_s14 textL"
              style="line-height: 2.2rem; width: 40rem; padding: 1rem 0.5rem 0.5rem 0.5rem; position: absolute; left: 5rem; z-index: 1"
            >
              <ul class="superviseList flexC select_ul" style="max-height: 12rem;">
                <li v-for="(item, index) in regulationList" @click="selectRegulation(item)" :key="'im' + index">{{ item }}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="flex">
          <span class="font_s16" style="color: #BAFFFC;">情况描述&nbsp;&nbsp;&nbsp;</span>
          <div class="flex1"><textarea rows="8" value="" placeholder="2018年8月22日，在上海浦东新区界龙古园开展风险监管时发现：1、未每年开展一次消防演练" class="font_s14" style="width: 93%; font-weight: 600;"></textarea></div>
        </div>
        <div class="flex">
          <span class="font_s16" style="color: #BAFFFC;">是否需要协调处置单位&nbsp;&nbsp;</span>
          <div class="flex" style="color: #65FDFF;">
            <span @click="workstartForm.isCoordinateOrg = true">
              <img :src="workstartForm.isCoordinateOrg ? `${url}img/06.png` : `${url}img/07.png`" class="verticM" style="width: 1.5rem;" />
              是
            </span>
            &nbsp;&nbsp;
            <span @click="workstartForm.isCoordinateOrg = false">
              <img :src="workstartForm.isCoordinateOrg ? `${url}img/07.png` : `${url}img/06.png`" class="verticM" style="width: 1.5rem;" />
              否
            </span>
          </div>
        </div>
        <div class="flexC" v-if="workstartForm.isCoordinateOrg" style="background-color: #4E5D65; margin: 0.5rem 3rem 0 5rem; padding: 1rem;">
          <div class="flex">
            <span class="font_s16" style="color: #BAFFFC;">处置机关&nbsp;&nbsp;</span>
            <ul class="flex flex1 textC space font_s14" style="color: #A7FFFC;">
              <li>
                <img
                  class="img_circle_f"
                  :class="workstartForm.disposeOffice === '1' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '1'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/32.png"
                />
                <p>公安局</p>
              </li>
              <li>
                <img
                  class="img_circle_f"
                  :class="workstartForm.disposeOffice === '2' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '2'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/33.png"
                />
                <p>应急局</p>
              </li>
              <li>
                <img
                  class="img_circle_f "
                  :class="workstartForm.disposeOffice === '3' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '3'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/34.png"
                />
                <p>市场监管局</p>
              </li>
              <li>
                <img
                  class="img_circle_f"
                  :class="workstartForm.disposeOffice === '4' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '4'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/35.png"
                />
                <p>卫健委</p>
              </li>
           <!--   <li>
                <img
                  class="img_circle_f"
                  :class="workstartForm.disposeOffice === '4' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '4'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/96.png"
                />
                <p>发改委</p>
              </li>
              <li>
                <img
                  class="img_circle_f"
                  :class="workstartForm.disposeOffice === '4' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '4'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/97.png"
                />
                <p>税务局</p>
              </li>
              <li>
                <img
                  class="img_circle_f"
                  :class="workstartForm.disposeOffice === '4' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '4'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/98.png"
                />
                <p>规划资源局</p>
              </li>
              <li>
                <img
                  class="img_circle_f"
                  :class="workstartForm.disposeOffice === '4' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '4'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/99.png"
                />
                <p>建交委</p>
              </li>
              <li>
                <img
                  class="img_circle_f"
                  :class="workstartForm.disposeOffice === '4' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '4'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/100.png"
                />
                <p>应急管理局</p>
              </li>
              <li>
                <img
                  class="img_circle_f"
                  :class="workstartForm.disposeOffice === '4' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '4'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/101.png"
                />
                <p>城管执法局</p>
              </li>
              <li>
                <img
                  class="img_circle_f"
                  :class="workstartForm.disposeOffice === '4' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '4'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/102.png"
                />
                <p>人社局</p>
              </li>
              <li>
                <img
                  class="img_circle_f"
                  :class="workstartForm.disposeOffice === '4' ? 'bg_active_b' : ''"
                  @click="workstartForm.disposeOffice = '4'"
                  style="width: 3rem;height: 3rem;"
                  src="../../../assets/img/comprehensive/103.png"
                />
                <p>司法局</p>
              </li> -->
            </ul>
          </div>
          <div class="flex" v-if="workstartForm.disposeOffice != ''">
            <span class="font_s16" style="color: #BAFFFC;">执法人员&nbsp;&nbsp;</span>
            <ul class="flex flex1 textC space font_s14" style="color: #A7FFFC;">
              <!-- <li :class="workstartForm.lawEnforcer === '1' ? 'bg_active_b' : ''" @click="workstartForm.lawEnforcer = '1'">
                <img style="width: 4rem;" src="../../../assets/img/comprehensive/45.png" />
                <p>夏永彬</p>
              </li> -->
              <li :class="workstartForm.lawEnforcer === '2' ? 'bg_active_b' : ''" @click="workstartForm.lawEnforcer = '2'">
                <img style="width: 4rem;" src="../../../assets/img/comprehensive/46.png" />
                <p>顾培玲</p>
              </li>
              <li :class="workstartForm.lawEnforcer === '3' ? 'bg_active_b' : ''" @click="workstartForm.lawEnforcer = '3'">
                <img style="width: 4rem;" src="../../../assets/img/comprehensive/47.png" />
                <p>胡玲</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="flexC" v-if="!workstartForm.isCoordinateOrg" style="background-color: #304EAD; margin: 0.5rem 3rem 0 5rem; padding: 1rem;">
          <div class="flex">
            <span class="font_s16" style="color: #BAFFFC;">检查人员&nbsp;&nbsp;</span>
            <ul class="flex flex1 textC space renyuanx font_s14" style="color: #A7FFFC;">
              <li :class="workstartForm.inspector === '1' ? '' : 'rydf'" @click="workstartForm.inspector = '1'">
                <img style="width: 3rem;height: 3rem;" src="../../../assets/img/comprehensive/49.png" />
                <p>顾培玲</p>
                <p>BGS002</p>
                <p>
                  <img src="../../../assets/img/comprehensive/53.png" class="verticM" />
                  137019020452
                </p>
              </li>
              <li :class="workstartForm.inspector === '2' ? '' : 'rydf'" @click="workstartForm.inspector = '2'">
                <img style="width: 3rem;height: 3rem;" src="../../../assets/img/comprehensive/49.png" />
                <p>胡玲</p>
                <p>BGS007</p>
                <p>
                  <img src="../../../assets/img/comprehensive/53.png" class="verticM" />
                  18521010509
                </p>
              </li>
            </ul>
          </div>
        </div>
        <div class="flex" style="padding-left: 5rem; padding-top: 1rem;">
          <div
            class="lijipd colorF"
            @click="
              liucheng1 = true;
              workstartView = false;
            "
          >
            任务发布
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Synergy',
  data () {
    return {
      url: process.env.BASE_URL,
      regulationList: [],
      superviseView: false,
      workstartForm: {
        // 检查类别
        inspect: '',
        // 紧急程度
        urgency: '',
        // 监管类型
        regulationType: 'risk',
        // 风险监管
        riskRegulation: '',
        // 信用监管
        creditRegulation: '',
        // 检查项
        checkItem: '',
        // 是否需要协调处置
        isCoordinateOrg: true,
        // 处置机关
        disposeOffice: '',
        // 执法人员
        lawEnforcer: '',
        // 检查人员
        inspector: ''
      }
    }
  },
  methods: {
    checkRegulationType (name) {
      this.workstartForm.regulationType = name
      this.workstartForm.riskRegulation = ''
      this.workstartForm.creditRegulation = ''
      this.regulationList = []
    },
    checkRiskRegulation (name) {
      this.workstartForm.riskRegulation = name
      this.regulationList = this.regulationMap[name]
    },
    checkCreditRegulation (name) {
      this.workstartForm.creditRegulation = name
      this.regulationList = this.regulationMap[name]
    },
    selectRegulation (item) {
      this.workstartForm.checkItem = item
      this.superviseView = false
    }
  }
}
</script>
<style lang="scss" scoped>
.synergy {
  width: 50%;
  max-width: 80%;
  position: absolute;
  top: 10%;
  right: 5%;
  .synergy_main {
    padding: 1rem;
    background: rgba(30, 38, 48, 0.9);
    border: 2px solid rgba(160, 244, 135, 1);
    border-radius: 10px;
    input,
    textarea {
      background: #4e5d65;
      border: none;
      margin: 0.3rem 0;
      padding: 0.3rem;
      color: #ffffff;
      width: 80%;
    }

    .content2 {
      margin-left: 1rem;
    }
    .content2 input {
      width: 68%;
    }
    .choice li {
      cursor: pointer;
      background: url(../../../assets/img/comprehensive/51.png) no-repeat;
      background-size: 100% 100%;
      line-height: 2.5rem;
      color: #65fdff;
    }

    .choice .xuanz {
      background: url(../../../assets/img/comprehensive/52.png) no-repeat;
      background-size: 100% 100%;
      line-height: 2.5rem;
    }
    .img_circle_f {
      background: rgba(18, 20, 24, 0.5);
      border-radius: 5px;
      padding: 0.5rem;
    }
    ul.space li {
      margin: 0.5rem;
      padding: 0.3rem;
      line-height: normal;
    }
    .renyuanx li {
      cursor: pointer;
      background: #162e77;
      border-radius: 5px;
    }

    .renyuanx .ryxz {
      background: #304ead;
      border-radius: 5px;
    }

    .renyuanx .rydf {
      background-color: #3a5ac0;
      border-radius: 5px;
    }
    .lijipd {
      background: #1ea34e;
      padding: 0.5rem;
      border-radius: 5px;
      margin-bottom: 1rem;
    }
  }
}
</style>
